import { useState, useCallback } from 'react';
import { useTranslation } from 'react-i18next'
import { useMediaQuery, useTheme, Typography } from '@mui/material';
import { useNavigate, useLocation } from 'react-router';
import { useDrawer } from '../contexts/drawerContextProvider';
import Menu from '@mui/icons-material/Menu';
import { Drawer, DrawerBody, DrawerHeader, DrawerNavGroup, DrawerFooter } from '@brightlayer-ui/react-components';
import { store } from '../redux'
import { searchRoute } from '../utils/util'
import { allRouters } from './routes'
import { filterRouter } from '@/utils/system/system'
// import { home_path } from '../utils/system/system';

export const NavigationDrawer = () => {
  const { t } = useTranslation()
  const { drawerOpen, setDrawerOpen } = useDrawer();
  const theme = useTheme();
  const navigate = useNavigate();
  const location = useLocation();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
  const [selected, setSelected] = useState(location.pathname);

  const topologyBgImage = require('@/assets/imgs/topology_40.png')
  const EatonFooterLogoDark = require('@/assets/imgs/EatonLogoDark.png')
  const EatonFooterLogoLight = require('@/assets/imgs/EatonLogoLight.png')
  const isDarkMode = store.getState().auth.theme === 'standard' ? false : true
  
  const handleNavigate = useCallback(
    (id) => {
      navigate(id);
      setSelected(id);
    },
    [navigate, setSelected]
  );
  function getNavMenu(array, pageList = store.getState().auth.userInfo.isAdmin ? allRouters : store.getState().menu.menuList) {
    pageList = pageList.filter(item => { // 将一些不必要的过滤掉
      return filterRouter.indexOf(item.path) < 0
    })
    pageList.forEach(routePath => {
      if (routePath.path) {
        const item = searchRoute(routePath.path, allRouters)
        if (item?.path && item?.meta?.showNav) {
          const Icon = item.meta.icon ? item.meta.icon : undefined
          let routeItem = {
            title: item.meta?.titleI18n ? t(`nav.${item.meta.titleI18n}`) : item.meta?.title,
            itemID: item.path || '',
            icon: Icon ? <Icon /> : undefined,
            index: item.index,
            onClick:
              !item.children && item.path !== undefined
                ? () => {
                  handleNavigate(item.path);
                  if (isMobile) setDrawerOpen(false);
                }
                : undefined,
            items: item.children ? getNavMenu([], item.children) : undefined
          }
          array.push(routeItem)
        }
      } else {
        if (routePath.children?.length) {
          array = getNavMenu(array, routePath.children)
        }
      }
    })
    array = array.sort((a, b) => {
      return a.index - b.index
    })
    return array
  }
  const footerKnobs = {
      hideContentOnCollapse: true,
      divider: true,
  };
  return (
    <Drawer
      open={drawerOpen}
      ModalProps={{
        onBackdropClick: () => {
          setDrawerOpen(false);
        },
      }}
      variant={isMobile ? 'temporary' : 'persistent'}
      activeItem={selected}
    >
      <DrawerHeader
        backgroundImage={topologyBgImage}
        title={'胡栋栋'}
        subtitle={'My React Framwork'}
        icon={<Menu />}
        onIconClick={() => {
          setDrawerOpen(!drawerOpen);
        }}
      />
      <DrawerBody>
        <DrawerNavGroup
          divider={true}
          nestedDivider={true}
          hidePadding={false}
          items={getNavMenu([])}
        />
      </DrawerBody>
      <DrawerFooter {...footerKnobs}>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            flexDirection: 'row',
            padding: 16,
          }}
        >
          <img
            src={isDarkMode ? EatonFooterLogoDark : EatonFooterLogoLight}
            alt="Eaton Logo"
            height={drawerOpen ? 28 : 8}
            width={'auto'}
          />
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <Typography
              variant={'caption'}
            >{`Copyright \u00A9 Hu Dongdong ${new Date().getFullYear()}`}</Typography>
            <Typography variant={'caption'}>All Rights Reserved</Typography>
          </div>
        </div>
      </DrawerFooter>
    </Drawer>
  );
};
